import React from 'react'
import {Button,  Table} from "antd";
import moment from 'moment'
import styles from './StayList.less';
import classNames from 'classnames';

const columns = [
  {
    key: '1',
    title: '编号',
    dataIndex: 'device_id',
    defaultSortOrder: 'descend',
  }, {
    key: '2',
    title: '地点',
    dataIndex: 'name',
  }, {
    key: '3',
    title: '地址',
    dataIndex: 'address',
  }, {
    key: '4',
    title: '开始时间',
    dataIndex: 'startTime',
  }, {
    key: '5',
    title: '到达时间',
    dataIndex: 'endTime',
  },
  {
    key: '6',
    title: '停留时间/分',
    dataIndex: 'stayTime',

  }, {
    key: '7',
    title: '坐标',
    dataIndex: 'xy',
    render: xy => <span>{xy.join(',')}</span>,
  }
];

class StayList extends React.Component {
  constructor(props) {
    super(props);
    document.body.style.cssText = 'overflow:hidden;';

  }
  componentDidMount() {

  }


  render() {
    const {
      visible,
      onClose,
      keys
    } = this.props;
    /**
     * 二维数组的遍历：停留点是二维
     */
    var arr=[];
    // points.map((item)=>{
    //   item.map((ele,index)=>{
    //     ele.key=ele.startTime+index;
    //     arr.push(ele)
    //   })
    // });

    return (
      <div style={visible ? {transform: 'translateY(0)'} : null} className={styles.wrap}>
        <Button htmlType="button" className={classNames(styles.closeBtn,)} size="small"
                icon={visible ? "down" : "up"} onClick={onClose}>{visible ? '关闭' : '显示'}</Button>
        <div>
          <div className={styles.inner}>
            <div className={classNames(styles.content, 'stay-table-wrap')}>
              <Table size="small" style={{fontSize: 10}} columns={columns} dataSource={arr}
                      key={keys}/>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default StayList;
